<template>
	<view class="bg-gray">
		<view class="wrapper width">
			<carousel :res="carouselImage" class="bgshare" height='380' />
			<view class="days">
				<scroll-view class="dayslist" 
				    scroll-x="true" 
					scroll-left="0"
				>
					<view
						:class="indexTab == index ? 'daycur day' : 'day'" 
						v-for="(item,index) in date" :key='index'
						@click="chooseTab(index)"
					>
						<view class="share">{{parseInt(index+1)}}</view>
						{{item}}
					</view>
				</scroll-view>
			</view>
			<view class=" main">
				<list :bg='bgimg' :list='courseList' title='电影名称' url='/pages/movie/moviedetail'></list>
			</view>
		</view>
	</view>
</template>
<script>
import tpl_banner from "@/pages/tabbar/roperty/template/tpl_banner"; //导航栏模块
import storage from "@/utils/storage.js"; //缓存
import list from "@/components/huashuiwan/list.vue";
import { getTime } from "@/utils/filters.js"; //缓存
import { getAudiovisual } from "@/api/movie";
export default {
	data() { 
		return {
			courseList:[],
			date:getTime(7),
			bgimg:'https://www.haopengsong.xyz/static/movie/navbg.png',
			indexTab:0,
			carouselImage:[
				{ name:require('@/static/movie/bg.png')}
			]
		};
	},
	components: {
		carousel: tpl_banner,
		list
	},
	/**
	 * 页面加载
	 */
	onLoad(options) {
		this.getList()
	},
	/**
	 * 页面显示
	 */
	onShow() {
		
	},
	/**
	 * 触底事件
	 */
	onReachBottom() {
		
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		
	},
	/**
	 * 页面滚动
	 * @param {Object} e
	 */
	onPageScroll(e) {
		
	},
	mounted() {
		
	},
	methods: {
		jump(res){
			uni.navigateTo({
				url: res
			});
		},
		chooseTab(index){
			this.indexTab = index
		},
		/** 桌号列表 **/
		getList(){
			getAudiovisual({roomId:3,periodDate:'2025-2-10'}).then(res=>{
				this.courseList = res.map(i=>{
					i.bannerImages = i.images;
					i.courseName = i.sliceName
					return i
				})
			})
		},
	}
};
</script>

<style lang="scss" scoped>
/**去除scroll-view的滚动条*/
::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}
 .dayslist{
 	width: 100%;
 	white-space: nowrap;
 	margin: 15px auto;
 	.day{
 		width: 93px;
 		height: 40px;
 		background-color: #fff;
 		display: inline-block;
 		border-radius: 12px;
 		text-align: center;
 		color: #2F3556;
 		margin-right: 12px;
 		line-height: 40px;
 		position: relative;
 		.share{
 			width: 24px;
 			height: 16px;
 			border-radius: 0px  12px  0px  12px;
 			background-color: #FF9100;
 			position: absolute;
 			line-height: 16px;
 			text-align: center;
 			color: #fff;
 			font-size: 12px;
 			right: 0;
 			top: 0;
 		}
 	}
 	.daycur{
 		background-color: #499C43;
 		color: #fff;
 		.share{
 			display: none;
 		}
 	}
 }
</style>